<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box{width: 100px;height: 100px;background: red;margin: auto;}
    </style>
</head>
<body>
    <!--
        flex 可以实现垂直居中

        作用在flex容器上                        
        flex-direction                          
        flex-wrap(单行显示还是多行显示)          
        flex-flow(上面两个的复合写法)             
        justify-content(主轴方向上子项的对齐和分布方式)                         
        align-items(子项们在侧轴方向的对齐方式)                             
        align-content(如果子项是一行是没有效果的，多行之间的对齐方式)                           

        作用在flex子项上
        order(改变某个子项的排序位置，值越大越靠后)
        flex-grow(将剩余的空间都占满，占剩余空间的几倍)
        flex-shrink(flex容器空间不足时，某个元素缩放几倍)
        flex-basis(分配剩余空间之前的元素默认大小)
        flex复合写法 默认值0 1 auto优先级大于单一样式
        align-self(对齐方式)
    -->
    <div id="parent">
        <div id="box"></div>
    </div>
</body>
</html>